<template>
  <div id="orderSeePage">
    <div class="header">
      用户
      <el-select v-model="orderInfo.userId" clearable placeholder="请选择">
        <el-option v-for="item in userAsk" :key="item.value" :label="item.value" :value="item.lable">
        </el-option>
      </el-select>

      <!--商户
            <el-select v-model="orderInfo.businessId" clearable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>-->
      通道
      <el-select v-model="orderInfo.channle" clearable placeholder="请选择">
        <el-option v-for="item in channle" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      支付方式
      <el-select v-model="orderInfo.payType" clearable placeholder="请选择">
        <el-option v-for="item in payType" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      起始时间
      <div class="block">
        <el-date-picker v-model="orderInfo.beginTime" type="datetime" placeholder="选择日期时间" class="width1">
        </el-date-picker>
      </div>
      结束时间
      <div class="block ">
        <el-date-picker v-model="orderInfo.endTime" type="datetime" placeholder="选择日期时间" class="width1">
        </el-date-picker>
      </div>

    </div>

    <!--<el-row class="orderCheck header">-->
    <!--<el-col :span="4">失败金额：<span>{{countObj.failMoeny}}</span>元</el-col>-->
    <!--<el-col :span="4">失败数量：<span>{{countObj.failNumber}}</span>单</el-col>-->
    <!--<el-col :span="4">成功金额：<span>{{countObj.successMoeny}}</span>元</el-col>-->
    <!--<el-col :span="4">成功数量：<span>{{countObj.successNumber}}</span>单</el-col>-->
    <!--<el-col :span="4">总金额：<span>{{countObj.totalMoeny}}</span>元</el-col>-->
    <!--<el-col :span="4">总数量：<span>{{countObj.totalNumber}}</span>单</el-col>-->
    <!--</el-row>-->
    <el-table :data="tableData" stripe v-loading="loading1">
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="businessName" label="通道">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column prop="amount" label="金额">
      </el-table-column>
      <el-table-column prop="orderNo" label="订单号">
      </el-table-column>
      <el-table-column prop="payType" label="支付类型">
      </el-table-column>
      <el-table-column prop="status" label="状态">
      </el-table-column>
      <el-table-column prop="body" label="备注">
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right;padding-right: 20px">

      <el-pagination layout="prev, pager, next" :current-page.sync="orderInfo.pageNumber" :page="orderInfo.pageNumber"
                     @current-change="handleCurrentChange" :total="total" :page-size="orderInfo.pageSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import dateformat from 'dateformat'

  export default {
    name: 'orderSee',
    data () {
      return {
        value1: '',
        loading1: false,
        payType: [{
          value: 1,
          label: '支付宝扫码'
        },
          {
            value: 2,
            label: '支付宝wap'
          },
          {
            value: 3,
            label: '京东支付'
          },
          {
            value: 4,
            label: 'QQ支付'
          },
          {
            value: 5,
            label: '快捷支付'
          },
          {
            value: 6,
            label: '微信扫码'
          },
          {
            value: 7,
            label: '微信扫码'
          }],
        orderType: [{
          value: 1,
          label: '待发起'
        }, {
          value: 3,
          label: '待支付'
        }, {
          value: 4,
          label: '支付成功'
        },
          {
            value: 5,
            label: '交易完成'
          },
          {
            value: 6,
            label: '已结算'
          }],
        value4: '',
        userAsk: [],
        channle: [],
        tableData: [],
        orderInfo: {
          userId: '',
          beginTime: '',
          endTime: '',
//					businessId:'',
          status: '',
          payType: '',
          outOrderNo: '',
          orderNo: '',
          upOrderNo: '',
          pageSize: 20,
          pageNumber: 1
        },
        total: 1,
        countObj: {}
      }
    },
    created () {
      this.getUserList()
      this.getChannleList()
    },
    methods: {
      getUserList () {
        let params = {
          pageSize: 9999
        }
        this.$api.getUserList(params).then(res => {
          if (res.code === '000000') {
            console.log(res.data)
            let mid = res.data.list
            mid.forEach(item => {
              this.userAsk.push({
                value: item.username,
                lable: item.id
              })
            })
          }
        })
      },
      getChannleList () {
        this.$api.getChannelList().then(res => {
          this.channle = res.data
        })
      },
//			getBusinessList() {
//				this.loading1 = true;
//				let _this = this;
//				this.$api.getBusinessList(this.$route.query.groupId, {
//					pageSize: this.pageSize,
//					pageNumber: this.pageNumber
//				}).then(res => {
//					if(res.code == '000000') {
//						_this.loading1 = false;
//						_this.businessList = res.data.list;
//						_this.total = res.data.totalRow;
//						console.log(res.data)
//					}
//				})
//			},
      queryOrderList () {
        this.loading1 = true
        for (let i in this.orderInfo) {
          if (this.orderInfo[i] === '') {
            delete this.orderInfo[i]
          }
        }
        this.orderInfo.beginTime = Date.parse(this.orderInfo.beginTime)
        this.orderInfo.endTime = Date.parse(this.orderInfo.endTime)
        if (isNaN(this.orderInfo.beginTime)) {
          delete this.orderInfo.beginTime
        }
        if (isNaN(this.orderInfo.endTime)) {
          delete this.orderInfo.endTime
        }

        this.$api.getAllOrderList(this.orderInfo).then(res => {
          if (res.code === '000000') {
            this.loading1 = false
            console.log(res.data)
            this.total = res.data.totalRow
            this.tableData = res.data.list
            this.tableData.forEach(item => {
              if (item.createTime) {
                let date = new Date(item.createTime)
                item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM')
              }
              switch (item.payType) {
                case 1:
                  item.payType = '支付宝扫码'
                  break
                case 2:
                  item.payType = '支付宝wap'
                  break
                case 3:
                  item.payType = '京东支付'
                  break
                case 4:
                  item.payType = 'QQ支付'
                  break
                case 5:
                  item.payType = '快捷支付'
                  break
                case 6:
                  item.payType = '微信扫码'
                  break
                case 7:
                  item.payType = '微信H5'
                  break
                default :
                  break
              }
              switch (item.status) {
                case 1:
                  item.status = '待发起'
                  break
                case 3:
                  item.status = '待支付'
                  break
                case 4:
                  item.status = '支付成功'
                  break
                case 5:
                  item.status = '交易完成'
                  break
                case 6:
                  item.status = '已结算'
                  break

                default :
                  break
              }
            })
            this.$message({
              type: 'success',
              message: '查询成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: '查询失败'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '查询失败'
          })
        })
        this.$api.getBackOrderCount(this.orderInfo).then(res => {
//          this.$message.success('统计成功');
          this.countObj = res.data
        }).catch(() => {
          this.$message.error('统计失败')
        })
      },
      handleCurrentChange (val) {
        this.orderInfo.pageNumber = val
        this.queryOrderList()
      }
    }
  }
</script>

<style lang="less">
  #orderSeePage {
    th {
      text-align: center;
    }
    .el-input__inner {
      height: 20px;
      font-size: 12px;
    }
    .el-input {
      width: 80px;
      display: inline-block;
      margin: 0 8px;
    }
    .header {
      padding: 18px 40px;
      font-size: 12px;
      white-space: nowrap;
      display: flex;
      justify-content: center;
    }
    .width1 {
      width: 160px;
    }
    .orderCheck {
      font-size: 14px;
    }
  }
</style>
